<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple custom error message</title>
    <style>
      input:invalid {
        border: 2px dashed red;
      }

      input:valid {
        border: 2px solid black;
      }
      form {
        margin: 3rem 0;
      }
    </style>
  </head>

<body>
  <form>
    <label for="mail">I would like you to provide me with an e-mail address:</label>
    <input type="email" id="mail" name="mail">
    <button>Submit</button>
  </form>

  <script>
  const email = document.getElementById("mail");

  email.addEventListener("input", function (event) {
    if (email.validity.typeMismatch) {
      email.setCustomValidity("I am expecting an e-mail address!");
    } else {
      email.setCustomValidity("");
    }
  });
  </script>
</body>

</html>
